<template>
  <div class="confirm-order">
    <Header />
    <div class="nav-outer">
      <div class="nav-1200 area1190">
        <span>首页</span> > <span>商城首页</span> > <span>订单结算</span> >
        <div class="nav-right">
          <span>售后政策</span>
          <i class="center-line"></i>
          <span>咨询客服</span>
        </div>
      </div>
    </div>
    <!-- 内容层 -->
    <div class="middle-box">
      <div class="content-box">
        <h3>退款详细</h3>
        <div class="table-box">
          <div class="table-title flex ai-c">
            <div class="flex-1">车型信息</div>
            <div class="col-2">意向金</div>
            <!--<div class="col-3">数量</div>-->
            <div class="col-4">退款金额</div>
          </div>
          <div class="table-list flex ai-c">
            <div class="flex-1">
              <div class="flex">
                <img :src="product.productPic|nopic" class="table-img" />
                <div class="title-box flex flex-d jc-c">
                  <p class="title">{{product.productName}}</p>
                  <span>{{product.subTitle}}</span>
                </div>
              </div>
            </div>
            <div class="col-2">¥{{product.productPrice}}</div>
            <!--<div class="col-3 flex jc-c">-->
              <!--<el-button-group class="flex">-->
                <!--<el-button-->
                  <!--size="mini"-->
                  <!--icon="el-icon-minus"-->
                  <!--@click="changeNum('-')"-->
                <!--&gt;</el-button>-->
                <!--<el-input v-model="num" class="num"></el-input>-->
                <!--<el-button-->
                  <!--size="mini"-->
                  <!--icon="el-icon-plus"-->
                  <!--@click="changeNum('+')"-->
                <!--&gt;</el-button>-->
              <!--</el-button-group>-->
            <!--</div>-->
            <div class="col-4">￥{{product.returnAmount}}</div>
          </div>
        </div>
        <!--<div class="info-box flex ai-c">-->
          <!--<span><span style="color:red">*</span>选择支付方式:</span>-->
          <!--&lt;!&ndash;<el-input placeholder="请输入您的姓名" v-model="input1"></el-input>&ndash;&gt;-->
          <!--<el-select v-model="value" placeholder="请选择">-->
            <!--<el-option-->
                    <!--v-for="item in options"-->
                    <!--:key="item.value"-->
                    <!--:label="item.label"-->
                    <!--:value="item.value">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</div>-->
        <!--<div class="info-box flex ai-c">-->
          <!--<span>*您的电话:</span>-->
          <!--<el-input placeholder="请输入您的电话" v-model="input2"></el-input>-->
        <!--</div>-->
        <div class="footer-box flex jc-fe ai-c">
          <span>商品合计: <b>￥{{product.returnAmount}} </b></span>
          <el-button  v-show="product.status==0" type="danger" class="sub-btn" @click="goOrder(id,total)"
            >支付</el-button
          >
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import axios from 'axios';
export default {
  name: "confirmOrder",
  components: {
    Header,
    Footer
  },
  data() {
    return {
      num: 0,
      input1: "",
      input2: "",
      product:{},
      totalPrice:'0.00',
      order:{},
      options:[
          {
              'label':'支付宝',
              'value':'1'
          },
          {
              'label':'微信',
              'value':'2'
          },
          {
              'label':'余额',
              'value':'3'
          },
          {
              'label':'授信额度支付',
              'value':'4'
          }
      ],
        value:'1'
    };
  },
  created(){
      this.product = this.$route.query;
      this.order = this.$route.query;
      this.value = this.order.payType;
      window.console.log('++'+this.product.status)
      this.num = this.product.productQuantity;
      this.totalPrice = this.num*this.product.productPrice;
  },
  methods: {
      changeNum(type) {
          if (type == "+") {
              this.num++;
          } else {
              if (this.num !== 1) this.num--;
          }
      },
      goOrder() {
          let _this = this;
          //调用支付接口生成二维码
          if (_this.value == 1) {
              let aliData = {
                  "body": "内容",
                  "out_trade_no": _this.order.orderSn,
                  "return_url": "https://www.baidu.com",
                  "subject": "wenju",
                  "total_amount": _this.order.payAmount,
              };
              _this.aliPay(aliData);
          }
          if (_this.value == 2) {
              let wechatData = {
                  "body": "订单-晶马整车商城",
                  "notifyurl": "www.baidu.com",
                  "outTradeNo": _this.order.orderSn,
                  "totalFee": _this.order.payAmount,
                  "productId": _this.product.id,
                  "tradeType": "NATIVE"
              };
              _this.wechatPay(wechatData);
          }
          if (_this.value == 3) {
              let wechatData = {
                  "orderNo": _this.order.orderSn,
              };
              _this.remain(wechatData);
          }
          if (_this.value == 4) {
              let wechatData = {
                  "orderNo": _this.order.orderSn,
              };
              _this.creditpay(wechatData);
          }
      },
      wechatPay(postData) {
          var _this = this;
          _this.$http.post('/order/wchatcode/query', postData).then(function (response) {
              _this.order.code_url = response.data.code_url;
              _this.order.payType = _this.value;
              _this.$message({
                  showClose: true,
                  message: response.message,
                  type: 'success'
              });
              //调用支付接口生成二维码

              _this.$router.push({path: '/payment', query: _this.order})
          })

      },
      aliPay(postData) {
          // var _this = this;
          // _this.$http.post('/pay/aliPay',postData).then(function (response) {
          //     window.console.log(response)
          //     window.debugger;
          //     _this.order.payType = _this.value;
          //
          //     document.querySelector('body').innerHTML = response;
          //
          //     const div = document.createElement('div') // 创建div
          //     div.innerHTML = response; // 将返回的form 放入div
          //     document.body.appendChild(div)
          //    document.forms[0].submit()
          //     //调用支付接口生成二维码
          //
          //    // _this.$router.push({path:'/payment',query: _this.order})
          // })
          axios({
              method: "post",
              url: "/api/pay/aliPay",
              data: postData
          }).then((res) => {
              console.log(res.data);
              document.querySelector('body').innerHTML = res.data;
              const div = document.createElement('div'); // 创建div
              div.innerHTML = res.data; // 将返回的form 放入div
              document.body.appendChild(div);
              document.getElementsByName('punchout_form')[0].submit()

          });
      },
      remain(postData){
          var _this = this;
          _this.$http.post('/order/balance-pay', postData).then(function (response) {
              _this.order.code_url = response.data.code_url;
              //调用支付接口生成二维码

              _this.$router.push({path: '/success', query: _this.order})
          })
      },
      creditpay(wechatData){
          var _this = this;
          _this.$http.post('/order/credit-pay', wechatData).then(function (response) {
              _this.order.code_url = response.data.code_url;
              //调用支付接口生成二维码

              _this.$router.push({path: '/success', query: _this.order})
          })
      },

  },
  computed:{
      total:function () {
          let total = 0;
          total = this.num*this.product.productPrice;
          return total;
      }
  }
};
</script>

<style lang="scss" scoped>
.middle-box {
  padding: 20px 0;
  .content-box {
    background: #fff;
    padding: 40px;
    text-align: left;
    h3 {
      font-size: 20px;
      color: #646464;
      padding-bottom: 10px;
    }
  }
  .table-box {
    text-align: center;

    .col-2 {
      width: 150px;
    }
    .col-3 {
      width: 200px;
    }
    .col-4 {
      width: 150px;
      color: #f40030;
    }
    .num {
      width: 50px;
      /deep/ input {
        text-align: center;
      }
    }
    .table-img {
      width: 120px;
      max-height: 100px;
      margin: 10px;
    }
    p {
      text-align: left;
      font-size: 18px;
      color: #333333;
    }
    span {
      text-align: left;
      font-size: 14px;
      color: #969696;
    }
  }
  .table-title {
    width: 100%;
    height: 50px;
    background-color: #f3f3f3;
    border: solid 1px #dcdcdc;
    color: #5b5b5b;
    font-size: 16px;
  }
  .table-list {
    width: 100%;
    border: solid 1px #dcdcdc;
    border-top: 0;
  }
  .info-box {
    width: 340px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin: 10px 0;
    span {
      width: 150px;
      padding: 10px;
      box-sizing: border-box;
    }
    /deep/ .el-input__inner {
      border: 0;
    }
  }
  .footer-box {
    border-top: solid 1px #dcdcdc;
    padding: 40px 0;
    margin-top: 100px;
    span {
      font-size: 14px;
    }
    b {
      font-size: 24px;
      color: #f40030;
    }
    .sub-btn {
      width: 160px;
      height: 50px;
      background-color: #f40030;
      margin-left: 20px;
    }
  }
}
</style>
